<template>
    <div>
      <!--头部标题-->
      <home-header></home-header>
      <!--菜单导航-->
      <home-linktab @getType="getType"></home-linktab>
      <!--显示内容-->
      <home-recommend v-if="type==1" :recommendList="recommendList"></home-recommend>
      <home-text v-if="type==2" :textconList="textconList"></home-text>
      <home-showimg v-if="type==3" :imgList="imgList"></home-showimg>
      <home-showvideo v-if="type==4" :list="videoList"></home-showvideo>
    </div>
</template>

<script>
  import HomeHeader from './components/Header'
  import HomeLinktab from './components/Linktab'
  import HomeRecommend from './components/Recommend'
  import HomeText from './components/Textcon'
  import HomeShowvideo from './components/Showvideo'
  import HomeShowimg from './components/Showimg'
    export default {
        name: "Home",
        data (){
          return {
            type:1,
            recommendList:[],
            textconList:[],
            imgList:[],
            videoList:[]
          }
        },
      components:{
          HomeHeader,
          HomeLinktab,
          HomeText,
          HomeRecommend,
          HomeShowimg,
          HomeShowvideo
      },
      methods:{
        getType(data){
          //console.log(data+"父组件");
          this.type = data;
          //console.log(this.type)
        },
        getInfo(){//获取对应类型的信息
          this.axios({
            method:'post',
            url:'https://www.apiopen.top/satinApi',
            params:{
              "type":this.type,
              "page":1
            }
          }).then(res=>{
            res = res.data;
            if(this.type==1){this.recommendList = res.data;}
            else if(this.type==2){this.textconList = res.data;}
            else if(this.type==3){this.imgList = res.data;}
            else if(this.type==4){this.videoList = res.data;}
          })
        }
      },
      created(){
          this.getInfo();
      },
      watch:{
          type:function () {
            this.getInfo()
          }
      }
    }
</script>

<style scoped>

</style>
